<template>
    <rx-dialog class="CalFieldDialog" @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div class="cal-field-common">
                    <div class="cal-field-le">
                        <a-form :model="fieldObj" ref="form" layout="inline" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="rules">
                            <a-row :gutter="24">
                                <a-col :span="12">
                                    <a-form-item :label="i18n('remarks','备注')" prop="label">
                                        <a-input style="width: 100%" v-model:value="fieldObj.label"/>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="$ti18('rxForm.rxAlias','别名')" prop="alias">
                                        <a-input style="width: 100%" v-model:value="fieldObj.alias"/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div style="margin-top: 20px;height: 400px;width: 100%">
                                <RxVueMonaco
                                    ref="rxVueMonaco"
                                    :show-max="true"
                                    :value="fieldObj.script"
                                    lineNumbers="off"
                                    :folding="false"
                                    :showToolbar="false"
                                    language="javascript"
                                ></RxVueMonaco>
                            </div>
                            <a-row style="margin-top: 20px;">
                                <a-col :span="24">
                                    <a-form-item :label="$ti18('rxForm.type', '类型')">
                                        <a-radio-group v-model:value="fieldObj.type" :disabled="field&&field.type?true:false" @change="typeChange">
                                            <a-radio value="dimension">{{ screenI18n('form.dimension', '维度') }}
                                            </a-radio>
                                            <a-radio value="measure">{{ screenI18n('form.measure', '度量') }}</a-radio>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                    <div class="cal-field-ri">
                        <div style="margin-left: 16px;margin-top: 10px;">
                            <span style="font-weight: bold;">{{ screenI18n('form.dimension', '维度') }}</span>
                            <div style="margin-top: 8px;" v-for="(dimension,index) in dimensions" :key="index">
                                <div style="margin-top: 1px;margin-left: 10px;"
                                     v-show="dimension.tableName!='CUSTOM_FIELD' && !field.hide"
                                     v-for="field in dimension.fields" :key="field.fieldName"
                                     @click="onClick(field,dimension)">
                                    <rx-icon-show :icon="getIcon(field)"  style="color:#02c5b7;margin-right: 6px"></rx-icon-show>
                                    {{field.fieldLabel }}
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 16px;margin-top: 10px;">
                            <span style="font-weight: bold;">{{ screenI18n('form.measure', '度量') }}</span>
                            <div style="margin-top: 8px;" v-for="(measure,index) in measures" :key="index">
                                <div style="margin-top: 1px;margin-left: 10px;"
                                     v-show="measure.tableName!='CUSTOM_FIELD' && !field.hide"
                                     v-for="field in measure.fields" :key="field.fieldName"
                                     @click="onClick(field,measure)"
                                >
                                    <rx-icon-show :icon="getIcon(field)"  style="color:#02c5b7;margin-right: 6px"></rx-icon-show>
                                    {{field.fieldLabel }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
/**
 * 新增计算字段对话框
 */
import {Util, RxVueMonaco, RxDialog, RxLayout} from "@lowcode/jpaas-base-lib";

export default {
    name: "CalFieldDialog",
    props: {
        destroy: {
            type: Function
        },
        dimensions: {
            type: Array,
            default: () => []
        },
        measures: {
            type: Array,
            default: () => []
        },
        field: {
            type: Object,
            default: () => {
            }
        },
    },
    components: {
        RxVueMonaco,
        RxDialog,
        RxLayout
    },
    data() {
        return {
            labelCol: {span: 10},
            wrapperCol: {span: 14},
            fieldObj: {
                label: "",
                alias: "",
                script:"return '';",
                type: "dimension",
            },
            rules: {
                label: [{required: true, message: this.i18n("remarksInput", "请输入备注"), trigger: 'change'}],
                alias: [{required: true, message: this.i18n("aliasInput", "请输入别名"), trigger: 'change'}]
            }
        }
    },
    created() {
        if (this.field) {
            this.fieldObj = Object.assign(this.fieldObj, this.field);
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "calFieldDialogLang", key);
        },
        screenI18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        onClick(field, item) {
            this.$refs['rxVueMonaco'].insertValue("${" + item.tableName + "_" + field.fieldName + "}");
        },
        handleSubmit() {
            let self=this;
            this.fieldObj.script = this.$refs['rxVueMonaco'].getValue();
            this.$refs.form.validate().then(() => {
                Util.closeWindow(self, "ok", self.fieldObj);
            });
        },
        typeChange(e) {
            let type = e.target.value;
            if (type == "dimension" && this.fieldObj.script == "return 0;") {
                this.fieldObj.script = "return '';"
            } else if (type == "measure" && this.fieldObj.script == "return '';") {
                this.fieldObj.script = "return 0;"
            }
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        //图标
        getIcon(obj) {
            if (obj.dataType == 'string') {
                return 'icon-lineField-String';
            } else if (obj.dataType == 'date') {
                return 'icon-lineriqi2';
            }else  {
                return 'icon-lineshuzi';
            }
        },
    }
}
</script>

<style scoped>
.cal-field-common {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.cal-field-le {
    flex: 1;
    border-right: 1px solid #b6b1b1;
    padding: 10px;
}

.cal-field-ri {
    width: 300px;
    overflow: auto;
}
.CalFieldDialog>>>.rx-dialog-content{
    padding: 0px!important;
}
</style>
